<template>
	<view class="view">
		<view class="student-xx">
			
			<view class="rect" >
			  <!-- 头像 -->
			  <view class="avatar-box"><image style="width: 100%;" :src="student.studentAvatar" class="avatar"></image></view>
			
			  <!-- 其他信息 -->
				 <view class="content">
					  
					  <view class="content1">
						<view class="stuName">{{student.studentName}}</view>
						<!-- <p v-text="studentName"></p> -->
						<image :src="getImagePath(student.studentSex)" mode="aspectFit" class="stuSex"></image>
						<view class="className"> {{student.className}}</view>
					  </view> 
						
					  <view class="content2">
						<text class="stuBirth">{{student.studentBirthday}}</text>  
						<text class="kgName">{{student.kgName}}</text>  
					  </view> 
					  
				  </view> 
				 
			   
			</view>
		</view>
		
		<view class="xx">
			
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						性别
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
			
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						出生日期
					</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{curData.studentBirthday}}</view>
						</picker>
					</view>
				</view>
			</view>
			
		</view>
		
		
<!-- 提交信息 -->
		<view class="footer">
			<button @click="editStu" class="btn-glbb"><p>提交</p></button>
		</view>
	</view>
</template>

<script>

	
	export default {
		
		data() {
			const currentDate = this.getDate({
			    format: true,
				})
			return {
				array: ['男', '女'],
				index: 0,
				studentId:null,
				student:null,
				//日期
				date:currentDate,
				
				//提交的信息
				curData:{
					id:null,
					studentSex:null,
					studentBirthday:null
				}
			}
		},
		onLoad(e) {
			this.studentId = parseInt(e.id)
			this.curData.id = parseInt(e.id)
			this.getStudentInfo()
		},

		methods: {
			//提交学生信息
			editStu(){
				uni.$api.studentEdit(this.curData).then(res =>{
					this.getStudentInfo()
					uni.$emit('refreshData');
				})
				
			},
			
			//获取学生信息
			getStudentInfo(){
				uni.$api.appFindStudentById(this.studentId).then(res =>{
					this.student = res
					if(this.student.studentSex == 1){
						this.index = 0
					}else{
						this.index = 1
					}	
					
					this.curData.studentSex = parseInt(res.studentSex);
					this.curData.studentBirthday = res.studentBirthday;
				})
			},
			//获取性别	
			bindPickerChange: function(e) {
				if(e.detail.value == "0"){
					this.curData.studentSex = 1
				}else{
					this.curData.studentSex = 2
				}
			    this.index = e.detail.value
			},
			//出生日期
			bindDateChange: function(e) {
			    this.date = e.detail.value
				this.curData.studentBirthday = e.detail.value
			
			},
			
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			
		
			
			//性别图标
			getImagePath(gender) {
			  if (gender === '1') {  
				return '/static/me/nan.png';
			  } else if (gender === '2') {  
				return '/static/me/nv.png';
			  } else {  
				return ''; // 如果性别不是1或2，返回空路径或其他默认图片路径  
			  }  
			}  
		}
	}
</script>

<style lang="scss">
	.view{
		background-color: #fff;
				position: fixed;
				top:0;
				left: 0%;
				width: 100%;
				height: 100%;
				object-fit: cover;
	}
	.xx{
		margin-top: -500rpx;
		background-color: #fff;
		
		.uni-list-cell-left{
			margin-left: 40rpx;
			font-size: 25rpx;
		}
		.uni-list-cell-db{
			margin: 30rpx 0 30rpx 80rpx;
			font-size: 35rpx;
		}
	}
	
	.uni-input{
		border-bottom: 1px #fff solid;
		height: 30px;
		top: 5px;
		right: 5px;
		bottom: 5px;
		left: 5px;
		
	}
	
	.student-xx{
		overflow: hidden;
		width: 2000rpx;
		height: 970rpx;
		background-color: #FDC722;
		border-radius: 50%;
		position:relative;
		top:-550rpx;
		left: -620rpx;
	}
	.rect{
		width: 650rpx;
		height: 200rpx;
		
		position:relative;
		top:720rpx;
		left: 670rpx;

	}
	.avatar-box{
		height: 100%;
		width: 25%;
		margin-top: 10rpx;
	}
	.avatar {  
		height: 80%;
		display: flex;
		border-radius: 50%;
		align-items: center;

		
	}
	.content{
		display: inline-block;
		width: 70%;
		height: 80%;
		position:relative;
		top:-220rpx;
		left: 30%;
		padding-left: 30rpx;
		padding-top: 50rpx;
	}
	.stuName{
		display: inline-block;
		// width: 120rpx;
		font-size: 1.3rem;
		font-weight: bold;
	}
	.stuSex{
		width: 30rpx;
		height: 30rpx;
		margin: 0 10rpx 0 10rpx;
		border-radius: 50%;
	}
	.className{
		display: inline-block;
		font-size: 0.8rem;
		padding: 5rpx 20rpx;
		// width: 150rpx;
		background-color: #FDF4D0;
		margin-left: 10rpx;
		margin-bottom: 10rpx;
		font-weight: bold;
		text-align: center;
		border-radius: 50rpx;
	}
	.stuBirth{
		font-size: 1rem;;
	}
	.kgName{
		font-size: 1rem;
		margin-left: 40rpx;
		margin-top: 20rpx;
	}

	.footer{
		width: 100%;
		height: 10%;
		position: fixed;
		bottom: 0rpx;
		background-color: white;
		padding-top: 30rpx;
	}
	.btn-glbb{
		width: 30%;
		height: 60%;
		background-color: #FDC722;
		border-radius: 50rpx;
		
	}
	.btn-glbb p{
		line-height: 60rpx;
		color: white;
		padding-bottom: 20rpx;
	}
</style>

